<template>
  <div class="lyric-wrap" ref="lyricWrapRef" :style="styleObj">
    <p
        v-for="(line , index) in lyricObj.lines"
        class="text-hidden"
        :class="{lyric_active : index === lyricObj.curren}"
    >{{line.txt}}</p>
  </div>
</template>

<script>
import Lyric from "@/lytic/lyric";
import { getLyric } from "@/api/request";
export default {
  props: ["musicId" , "currenTime"],
  data() {
    return {
      lyricObj: {
        lines: [],
        total: 1,
        curren: 0,
      },
      styleObj: {
        "text-align": "center",
        width: "600px",
      },
    };
  },
  watch:{
    musicId:{
      immediate:true,
      handler(val){
        if(val){
          this.getLyric();
        }
      }
    },
    currenTime(val){
      if(val) this.handleCurrenTime(val);
    }
  },
  created() {
     
  },
  methods: {
    //获取歌词
    async getLyric() {
      const { data: res } = await getLyric(this.musicId);
      console.log(res);
      if (res.code !== 200) return this.$message.error("获取歌词失败");
      if (res.lrc) this.lyricObj = new Lyric(res.lrc.lyric);
      this.$nextTick(() => {
        this.$refs.lyricWrapRef.scrollTop = 0;
      });
    },
    //歌词滚动
    handleCurrenTime(time){
      if(
        this.lyricObj.curren !== this.lyricObj.total -1 &&
        time + 0.5 > this.lyricObj.lines[this.lyricObj.curren + 1].time
      ){
        // 正常播放或者向前拉进度条
        this.lyricObj.curren ++ ;
        // 在拉进度条的时候，time只改变了一次，但是要定位到歌词对应的行
        if(
           this.lyricObj.curren !== this.lyricObj.total -1 &&
           time + 0.5 > this.lyricObj.lines[this.lyricObj.curren + 1].time
        ){
          this.handleCurrenTime(time);
        }
        this.lyricHanlder(this.lyricObj.curren);
      } else if(
        this.lyricObj.curren != 0 &&
        time - 0.5 < this.lyricObj.lines[this.lyricObj.curren - 1].time
      ){
        // 往前拉进度条
        this.lyricObj.curren --
        if(
          this.lyricObj.curren != 0 &&
          time - 0.5 < this.lyricObj.lines[this.lyricObj.curren - 1].time
        ){
          this.handleCurrenTime(time);
        }
        this.lyricHanlder(this.lyricObj.curren)
      }
    },
    // 歌词行数发生改变的回调
    lyricHanlder(lineNum){
      if(lineNum > 4) this.scrollAnimation(lineNum - 4);
      else this.$refs.lyricWrapRef.scrollTop = 0;
    },
    // 歌词滚动动画
    scrollAnimation(line){
      let start;
      const step = (timestamp) => {
        if(start === undefined) start = timestamp;
        const elapsed = timestamp - start;
        this.$refs.lyricWrapRef.scrollTop = Math.min(
          0.16 * elapsed + (line - 1) * 40, line * 40
        )
        if(elapsed < 250){
          window.requestAnimationFrame(step);
        }
      }
      window.requestAnimationFrame(step);
    }

  },
};
</script>

<style lang="less" scoped>
.lyric-wrap {
  width: 350px !important; 
  height: 400px;
  overflow-y: scroll;
  scrollbar-width: thin;
  margin: 40px 0 0 20px;
  color: #666666;
  font-size: 14px;
  line-height: 40px;
  transition: all 0.8s linear;
  &::-webkit-scrollbar {
    width: 1px;
  }
  p {
    height: 40px;
  }
}
.lyric_active{
    font-weight: bold;
    font-size: 15px;
    color: red;
}
</style>